<template>
    <div class="myAchievement">
         <div class="pageTitle" > 
            <span @click="goBack" class="goBack">{{'<'}}</span>
            我的勋章 
        </div>

        <ul class="achievementList">
            <li>
                <div v-show="cardIndex == 1" @click="turnOver(0)">
                    <span class="count">10</span>
                    <span class="message">每次只完成1天计划后就开摆</span>
                </div>
                <div v-show="cardIndex !== 1"  @click="turnOver(1)">摆烂型</div>
            </li>
            <li>
                <div v-show="cardIndex == 2" @click="turnOver(0)">
                    <span class="count">1</span>
                    <span class="message">多次达成联系保持完成计划一周</span>
                </div>
                <div v-show="cardIndex !== 2" @click="turnOver(2)">稳定输出型</div>
            </li>

            <li>
                <div  v-show="cardIndex == 3" @click="turnOver(0)">
                    <span class="count">0</span>
                    <span class="message">已经连续保持完成计划半个月</span>
                </div>
                <div  v-show="cardIndex !== 3" @click="turnOver(3)">自律型</div>
            </li>

            <li>
                <div  v-show="cardIndex == 4" @click="turnOver(0)">
                    <span class="count">0</span>
                    <span class="message">已经连续保持完成计划三个月</span>
                </div>
                <div   v-show="cardIndex !== 4" @click="turnOver(4)">坚守自我型</div>
            </li>

            <li>
                <div  v-show="cardIndex == 5" @click="turnOver(0)">
                    <span class="count">0</span>
                    <span class="message">已经连续保持完成计划6个月</span>
                </div>
                <div  v-show="cardIndex !== 5"  @click="turnOver(5)">毅力顽强型</div>
            </li>


            <li>
                <div  v-show="cardIndex == 6" @click="turnOver(0)">
                    <span class="count">0</span>
                    <span class="message">已经连续保持完成计划1年</span>
                </div>
                <div  v-show="cardIndex !== 6"  @click="turnOver(6)">雷打不动型</div>
            </li>


        </ul>

    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const cardIndex = ref(0)
const goBack=()=>{
    console.log('1')
    history.back()
}

const turnOver=(index)=>{
    cardIndex.value = index
}

</script>

<style lang="less" scoped>
.myAchievement{
    padding: 15px;
    position: relative;
    font-size: 18px;
    box-sizing: border-box; 
    min-height: calc(100vh - 30px);

    .pageTitle{
        position: relative;
        font-size: 30px;
        .goBack{
            position: absolute;
            left: 0;
            text-align: left;
        }
    }

    .achievementList{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 10px;
        position: relative;

        li{
            height: 150px;
            div{
                height: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                padding: 0 15px;
                border: solid 2px black;
                background: #6f6d60;
                .count{
                    font-size: 30px;
                    color: #f4e775;
                    font-weight: bolder;
                }

                .message{
                    color: #f1eec6;
                }

            }

        }
    }
}

</style>